@charset 'utf-8';
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
body{background-color: #f5f5f5;font-size: 14px;font-family: 'Avenir Next','Lantinghei SC';-webkit-font-smoothing:antialiased;}

.wrap{position: relative;width: 100%;height: 100%;overflow: hidden;background-color: #666;}

/* 设置位置样式 */
.wrap .photo{position: absolute;width: 240px;height: 340px;left: 50%;top: 50%;margin-top: -170px;margin-left: -120px;z-index: 1;transition: all .6s;-webkit-transition: all .6s;-moz-transition: all .6s;-ms-transition: all .6s;perspective:800px;-webkit-perspective:800px;-moz-perspective:800px;-ms-perspective:800px;}
.wrap .photo .side{width: 100%;padding: 20px 20px 0;box-sizing: border-box;}
.wrap .photo .side-front{position: absolute;}
.wrap .photo .side-front .image{width: 100%;height: 280px;line-height: 300px;overflow: hidden;}
.wrap .photo .side-front img{display: block;width: 100%;height: auto;border:none;}
.wrap .photo .side-front .caption{font-size: 16px;color: #666;text-align: center;line-height: 26px;}
.wrap .photo .side-back{position: absolute;font-size: 16px;color: #666;}
.wrap .photo_center{left: 50%;top: 50%;margin-left: -120px;margin-top: -170px;z-index: 999;}

/* 设置翻转样式 */
.photo-wrap{position: absolute;width: 100%;height:100%;background-color: #fff;transform-style: preserve-3d;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d;transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;transform-origin: 0% 50%;-webkit-transform-origin: 0% 50%;-moz-transform-origin: 0% 50%;-ms-transform-origin: 0% 50%;}
.wrap .photo-wrap .side-front{transform: rotateY(0deg);-webkit-transform: rotateY(0deg)}
.wrap .photo-wrap .side-back{transform: rotateY(180deg);-webkit-transform: rotateY(180deg)}
.wrap .side{backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-ms-backface-visibility:hidden;}

/* 改变样式 */
.wrap .photo_front .photo-wrap{transform: translate(0px,0px) rotateY(0deg);-webkit-transform: translate(0px,0px) rotateY(0deg);-moz-transform: translate(0px,0px) rotateY(0deg);-ms-transform: translate(0px,0px) rotateY(0deg);}
.wrap .photo_back .photo-wrap{-webkit-transform: translate(240px,0px) rotateY(180deg);-moz-transform: translate(240px,0px) rotateY(180deg);-ms-transform: translate(240px,0px) rotateY(180deg);}

/* 导航栏样式 */
.nav{position:absolute;width: 40%;height:30px;left: 30%;bottom: 10%;background-color: #fff;line-height: 30px;z-index: 10000;text-align: center;}
.nav span{display: inline-block;width: 30px;height: 30px;border-radius: 100%;background-color: #666;transform: scale(.48);-webkit-transform: scale(.48);-moz-transform: scale(.48);-ms-transform: scale(.48);cursor: pointer;transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;}
.nav i{display: inline-block;width: 100%;height: 100%;border-radius: 100%;transition: all .4s;-webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;}
.nav i{color: #fff;opacity: 0;}
.nav span.current{transform: scale(.8);-webkit-transform: scale(.8);-moz-transform: scale(.8);-ms-transform: scale(.8);}
.nav span.current i{opacity: 1;}
.nav span.btn_back i{background-color: #333;transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-ms-transform: rotateY(-180deg);}


